import './index.scss'
import {View, Text} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {standardConfigStore} from './model'
import appStore from '@/store/app'
import {IconImg} from '@/components/images'
import {splitStandardUnit} from '@/utils/standard'
import {toParamStandardSetting} from '@/utils/pageRedirect'

const Standardconfig = () => {
  let router = useRouter()
  const {
    updatePageQuery,
    pageQuery,
    updatePageDataSource,
    getAddress,
    getPageDataSource
  } = useContext(standardConfigStore)
  const {userInfo} = useContext(appStore)

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Standardconfig useEffect')
    // !getPageDataSource && updatePageDataSource(userInfo.userId)
  }, [pageQuery])

  // 对应 onShow
  useDidShow(() => {
    console.log('Standardconfig useDidShow')
    updatePageQuery(router.params)
    updatePageDataSource(userInfo.userId)
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Standardconfig useDidHide')
  })

  return (
    <View className="container bg-xx_bg">
      <View className="h-full overflow-auto pb-64">
        <View className="hanzi text-16 font-bold mt-23 mb-14 px-16 flex items-center gap-x-6">
          <IconImg imgName="device"></IconImg>
          <View className="hanzi">{getPageDataSource?.devName}</View>
        </View>

        <View className="hanzi text-14 text-xx_text mb-14 px-16">
          {getAddress ? <View className="mb-6">{getAddress}</View> : ''}

          {getPageDataSource?.devBelong ? (
            <View>{getPageDataSource.devBelong}</View>
          ) : (
            ''
          )}
        </View>

        <View className="bg-white border-0 border-t-1 border-b-0 border-x_line px-16">
          {getPageDataSource?.devStandRangeList.map(devStandard => {
            let standRangeUnit = splitStandardUnit(devStandard.standRange)
            return (
              <View
                className={`flex items-center justify-between py-12 px-8  border-0 border-b-1 border-solid border-x_line`}
                onClick={() => {
                  toParamStandardSetting({
                    devId: devStandard.devId,
                    paramName: devStandard.paramName,
                    devSRId: devStandard.devSRId
                  })
                }}
              >
                <View className="">
                  <View className="hanzi text-14 text-black mb-6">
                    {devStandard.paramName}
                    {devStandard.isOpen !== 1 ? (
                      <Text style="color:#f89898;">（已禁用）</Text>
                    ) : null}
                  </View>
                  <View className="notHanzi text-12 text-xx_text flex items-center gap-x-10">
                    {standRangeUnit
                      ? devStandard.standRange
                      : '暂未设置标准，请点击此处前往添加标准'}
                  </View>
                </View>
                <IconImg imgName="allowRight" width={32} height={32}></IconImg>
              </View>
            )
          })}
        </View>
      </View>
    </View>
  )
}
export default observer(Standardconfig)
